<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 50px;
				/* 边框、背景颜色：查选择器是否选中，效果是否正确*/
				border:1px solid black;
				background-color: #a1a1a1;
			}
			#body{
				width: 100%;
				height: 900px;
				border:1px solid black;
				background-color: #ffff7f;
			}
			#footer{
				width: 100%;
				height: 200px;
				border:1px solid black;
				background-color: #ffaaff;
			}
		</style>
	</head>
	<body>
		<!-- ①元素选择器：以元素名作为选择器，抓取元素
		     ②伪类选择器：原选择器上附加效果。：hover 鼠标悬停
		                                   ：before 在   前 添加文本，一般与content属性
									       ：after  在   后 添加文本，一般与content属性
			③类选择器：以1个或者多个别名作为选择器，抓取元素【页面微调】
			④通用选择器：抓取页面上所有元素，规范页面元素【盒模型、字体】						   
		    ⑤id选择器：用在页面结构搭建【唯一性，切片】 
		    语法：html前标记id="header" 别名
		     css #header  别名
			 id选择器与class选择器区别
			 搭建页面结构板，根据结构中小范围微调
		-->
		<div id="header"></div>
		<div id="body"></div>
		<div id="footer"></div>
	</body>
</html>